import React from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { useTranslation } from 'react-i18next';
import { getDynamicFonts } from '@/utils/fontUtils';

// 定义组件参数类型
interface LogoutConfirmModalProps {
  show: boolean;
  onClose: () => void;
  onConfirm: () => void;
}

// 退出登录确认弹窗组件
const LogoutConfirmModal: React.FC<LogoutConfirmModalProps> = ({ show, onClose, onConfirm }) => {
  const { t, i18n } = useTranslation();
  const dynamicFonts = getDynamicFonts(i18n);

  // 点击背景遮罩关闭弹窗
  const handleBackdropClick = (e: React.MouseEvent) => {
    if (e.target === e.currentTarget) {
      onClose();
    }
  };

  // 动画配置
  const backdropVariants = {
    hidden: { opacity: 0 },
    visible: { opacity: 1 }
  };

  const modalVariants = {
    hidden: { 
      scale: 0.5, 
      opacity: 0,
      rotate: -10,
      y: 50
    },
    visible: { 
      scale: 1, 
      opacity: 1, 
      rotate: 0,
      y: 0,
      transition: {
        type: "spring" as const, // 修复类型
        stiffness: 300,
        damping: 20,
        duration: 0.4
      }
    },
    exit: { 
      scale: 0.5, 
      opacity: 0,
      rotate: 10,
      y: 50,
      transition: {
        duration: 0.3
      }
    }
  };

  const buttonVariants = {
    hover: { 
      scale: 1.05,
      transition: { 
        type: "spring" as const, // 修复类型
        stiffness: 400, 
        damping: 10 
      }
    },
    tap: { scale: 0.95 }
  };

  const glowVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: [0.2, 0.4, 0.2], 
      transition: { 
        repeat: Infinity, 
        duration: 2,
        ease: "easeInOut" as const // 修复类型
      }
    }
  };

  return (
    <AnimatePresence>
      {show && (
        // 背景遮罩层
        <motion.div
          className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-60 z-[1000]"
          initial="hidden"
          animate="visible"
          exit="hidden"
          variants={backdropVariants}
          onClick={handleBackdropClick}
          style={{ backdropFilter: 'blur(5px)' }}
        >
          {/* 弹窗主体 */}
          <motion.div
            className="relative bg-[rgb(24,24,27)] rounded-xl shadow-xl max-w-md w-[90%] md:w-[400px] overflow-hidden"
            variants={modalVariants}
            initial="hidden"
            animate="visible"
            exit="exit"
          >
            {/* 发光效果背景 */}
            <motion.div 
              className="absolute inset-0 bg-gradient-to-r from-pink-500/20 to-purple-500/20 rounded-xl"
              variants={glowVariants}
              initial="hidden"
              animate="visible"
            />

            {/* 弹窗内容 */}
            <div className="relative z-10 p-6 flex flex-col items-center">
              {/* 图标动画 */}
              <motion.div
                className="w-20 h-20 bg-red-500/10 rounded-full flex items-center justify-center mb-4"
                initial={{ rotate: 0 }}
                animate={{ 
                  rotate: [0, -10, 10, -10, 0],
                  scale: [1, 1.1, 1] 
                }}
                transition={{ 
                  duration: 1.2,
                  repeat: Infinity,
                  repeatDelay: 1
                }}
              >
                <i className="fas fa-sign-out-alt text-red-500 text-4xl" />
              </motion.div>

              {/* 标题 */}
              <motion.h3 
                className="text-xl font-bold mb-4 text-white"
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: 0.2 }}
                style={{ fontFamily: dynamicFonts.font3 }}
              >
                {t('logout.confirmTitle')}
              </motion.h3>

              {/* 确认文本 */}
              <motion.p 
                className="text-gray-300 text-center mb-6"
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: 0.3 }}
                style={{ fontFamily: dynamicFonts.font2 }}
              >
                {t('logout.confirmMessage')}
              </motion.p>

              {/* 按钮区域 */}
              <div className="flex gap-4 w-full justify-center">
                {/* 取消按钮 */}
                <motion.button
                  className="px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white rounded-lg flex-1"
                  onClick={onClose}
                  variants={buttonVariants}
                  whileHover="hover"
                  whileTap="tap"
                  style={{ fontFamily: dynamicFonts.font3 }}
                >
                  {t('common.cancel')}
                </motion.button>

                {/* 确认按钮 */}
                <motion.button
                  className="px-4 py-2 bg-red-500 hover:bg-red-600 text-white rounded-lg flex-1"
                  onClick={onConfirm}
                  variants={buttonVariants}
                  whileHover="hover"
                  whileTap="tap"
                  style={{ fontFamily: dynamicFonts.font3 }}
                >
                  {t('login.confirm')}
                </motion.button>
              </div>
            </div>
          </motion.div>
        </motion.div>
      )}
    </AnimatePresence>
  );
};

export default LogoutConfirmModal;